<template>
	<div class="edit_page">
		<div class="doc_title">
			<el-input v-model="doc.title" maxlength="32" placeholder="文档标题"></el-input>
		</div>
		<el-divider></el-divider>
		<div class="toolbar">
			<Toolbar
			:editor="editor"
			:defaultConfig="toolbarConfig"
			mode="default"
			></Toolbar>
		</div>
		<div class="edit_editor">
			<editor
			ref="editorRef"
			v-model="doc.content"
			:defaultConfig="editConfig"
			@onCreated="handlerCreate"
			mode="default"
			></editor>
		</div>
		<div class="edit_btn">
			<el-button @click="saveDraftsDoc">保存到草稿箱</el-button>
			<el-button type="primary" @click="publishDoc">发布</el-button>
			<el-button type="danger" @click="cancelDoc">取消</el-button>
		</div>
	</div>
</template>

<script>
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { getDoc, saveDoc, modifyDoc } from '@/api/doc'
import { upload } from '@/api/file'
const fullDocRes = []
export default {
	name: 'EditPage',
	components: {
		Editor,
		Toolbar
	},
	data() {
		let that = this
	  return{
		  doc: {
			  id: this.$route.query.id,
			  title: '',
			  content: ''
		  },
		  toolbarConfig:{
			  excludeKeys: [
				  'insertImage',
				  'insertVideo'
				  // 'uploadImage',
				  // 'uploadVideo'
			  ]
		  },
		  docResList: [],
		  editConfig: {
			  scroll: true,
			  maxLength: 60000,
			  MENU_CONF: {
				  uploadImage: {// 自定义上传图片
					  customUpload(file,insertFn){
						console.log(file,insertFn)
						upload({
							'file': file,
							'docId': that.doc.id
						})
						.then(ret => {
							 let url = ret.data.url
							if(!String(url).startsWith('http')){
								url = import.meta.env.APP_SERVER + import.meta.env.APP_BASE_URL + url
							}
							that.docResList.push(url)
							insertFn(url,'','')
						})
					  }
				  },
				  uploadVideo: {
					  customUpload(file,insertFn){
					  	console.log(insertFn)
					  	upload({
							'file': file,
							'docId': that.doc.id
						})
					  	.then(ret => {
					  		let url = ret.data.url
					  		if(!String(url).startsWith('http')){
					  			url = import.meta.env.APP_SERVER + import.meta.env.APP_BASE_URL + url
					  		}
							that.docResList.push(url)
					  		insertFn(url,'','')
					  	})
					  }
				  }
			  }
		  },
		  editor: undefined,
		  space: this.$route.query.space,
		  parentId: this.$route.query.parentId,
		  isFirstLoad: true
	  }
	},
	methods: {
		handlerCreate: function(editor){
			this.editor = editor
		},
		linkDoc: function(docId){
			if(docId){
				this.$router.push({
					path: '/page',
					query: {
						id: docId
					}
				})
			}else{
				this.$router.push({
					path: '/'
				})
			}
			
		},
		saveDoc: function(saveType){
			let usedRes = []
			// 图片
			let res = this.editor.getElemsByType('image')
			if(res){
				res.forEach((item) => {
					usedRes.push(item.src)
				})
			}
			// 视频
			res = this.editor.getElemsByType('video')
			if(res){
				res.forEach((item) => {
					usedRes.push(item.src)
				})
			}
			// 获取失效资源地址
			let invalidRes = []
			if (usedRes.length == 0){
				invalidRes.push(...this.docResList)
			}else{
				console.log('docResList',this.docResList)
				console.log('usedRes',usedRes)
				this.docResList.forEach((item) => {
					if(usedRes.indexOf(item) < 0){
						invalidRes.push(item)
					}
				})
			}
			if(this.doc.id){
				return modifyDoc({
					"spaceId": this.space,
					"parentId": this.parentId,
					"id": this.doc.id,
					"title": this.doc.title,
					"content": this.doc.content,
					"saveType": saveType,
					"invalidRes": invalidRes
				})
			}
			return saveDoc({
				"spaceId": this.space,
				"parentId": this.parentId,
				"title": this.doc.title,
				"content": this.doc.content,
				"saveType": saveType,
				"invalidRes": invalidRes
			})
		},
		saveDraftsDoc: function(){
			this.saveDoc(0)
			.then(ret => {
				this.linkDoc(this.doc.id ? this.doc.id : this.parentId)
			})
		},
		publishDoc: function(){
			this.saveDoc(1)
			.then(ret => {
				this.$emit('refushMenu')
				this.linkDoc(ret.data.id)
			})
		},
		cancelDoc: function(){
			this.linkDoc(this.doc.id ? this.doc.id : this.parentId)
		},
		getDoc: function(docId){
			let that = this
			getDoc(docId)
			.then((data) => {
				that.doc = data.data
				// 解析文档资源列表
				that.docResList = [] // 清空资源列表
				if(that.doc.resList){
					that.doc.resList.forEach((item) => { // 加载资源列表
						that.docResList.push(import.meta.env.APP_SERVER + import.meta.env.APP_BASE_URL + item.url)
					})
				}
			})
		}
	},
	watch: {
		'$route': function(){
			console.log("edit page watch $route modify doc.id:",this.doc.id,this.$route.query.id)
			this.doc.id=this.$route.query.id
			if(this.doc.id){
				this.getDoc({'id': this.doc.id})
			}
		}
	},
	mounted() {
		if(this.doc.id){
			this.getDoc({'id': this.doc.id})
		}
		this.$emit('updatePageStatus',true)
	},
	unmounted() {
		if(this.editor){
			this.editor.destroy()
		}
	}
}
</script>

<style scoped>
.edit_page{
	width: 100%;
	height: 100%;
}
.doc_title{
	height: 40px;
}
.edit_toolbar{
	height: 80px;
}
.edit_btn{
	height: 30px;
	padding: 10px;
	display: flex;
	justify-content: end;
}
.edit_editor{
	height: calc(100vh - 360px);
	overflow-y: hidden;
}
</style>